<template>
  <div class="news">
    <!--导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <!-- 第一种写法 -->
        <!-- <RouterLink 
          :to="`/news/detail/${news.id}/${news.title}/${news.content}`"
        >
          {{ news.title }}
        </RouterLink> -->

        <!-- 第二种写法 -->
        <RouterLink 
          :to="{
            // path: '/news/detail', // params 方式，这儿不能用path,报错！
            name: '详情',
            params: {
              id: news.id, // params 不能转对象和数组，比如a:[1,3,4]，报错!
              title: news.title,
              content: news.content
            }
          }"
        >
          {{ news.title }}
        </RouterLink>
      </li>
       
    </ul>
    <!--展示区 -->
    <div class="news-content">
      <RouterView />
    </div>
  </div>
</template>

<script setup lang="ts" name="News">
/**
 * 
 * vue 路由传参有两种方式：query 和 params
 */

import {reactive} from 'vue'
// 不用引入也能识别
import {RouterView, RouterLink} from 'vue-router'

const newsList = reactive([
  {id: 'woejojeot143243', title: '很好的抗癌食物', content: '西兰花'},
  {id: 'woejojeot143202', title: '如何一夜暴富', content: '学IT'},
  {id: 'woejojeot143203', title: '震惊，万万没想到', content: '明天是周一'},
  {id: 'woejojeot143204', title: '好消息！好消息!', content: '快过年了'},
])
</script>

<style scope>
.news {
  padding: 0 20px;
  display: flex;
  flex-direction: space-between;
  height: 100%;
}
.new ul {
  margin-top: 30px;
  /* list-style: none; */
  padding-left: 10px;
}
.news li::marker {
  color: #64967E;
}
.news li>a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967E;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>